<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>web_home</title>

    <meta name="author" content="pixelhint.com">

    <meta name="description"
          content="Crafty is a stunning HTML5/CSS3 multi-purpose template, well-coded, commented code and easy to customize">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

    <link rel="stylesheet" type="text/css" href="{% static 'css/home/reset.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static 'css/home/main_responsive.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/rotation_chart/rotation.css' %}">

    <script type="text/javascript" src="{% static 'js/home/jquery.js.下载' %}"></script>
    <script type="text/javascript" src="{% static 'js/home/carouFredSel.js.下载' %}"></script>
    <script type="text/javascript" src="{% static 'js/home/main.js.下载' %}"></script>
    <link rel="shortcut icon" href="{% static 'ico/home_favicon.ico' %}"/>
    <style>
        .round_icon {
            width: 34px;
            height: 34px;
            display: flex;
            border-radius: 50%;
            margin-top: -10px;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .my-user {
            width: 78px;
            height: 78px;
        }

        .my-user img {
            width: 78px;
            height: 78px;
            display: block;
            border: 1px solid #c1c0be;
            border-radius: 100%;
        }

    </style>
</head>
<body>
<header>
    <!--导航栏 start-->
    <div class="wrapper">

        <img src="{% static 'images/home/logo.png' %}" alt="Crafty" class="logo">
        <!--导航栏折叠按钮-->
        <a href="" class="menu_icon" id="menu_icon"></a>
        <!--导航栏左侧 start-->
        <nav id="nav_menu">
            <ul>
                <li><a href="">网站首页</a></li>
                <li><a href="">价格</a></li>
                <li><a href="">帮助文档</a></li>

                <li style="margin-left: 150px"></li>

                {% if request.chart_web.user %}

                    <li style="float: right"><a href="{% url 'logout' %}">退出登录</a></li>
                    <li style="float: right"><a
                            href="{% url 'personal_center' %}">{{ request.chart_web.user.username }}</a></li>
                    <li style="float: right"><a href="{% url 'personal_center' %}"><img
                            src="media/{{ request.chart_web.user.icon }}" alt="头像"
                            class="round_icon"></a>
                    </li>
                {% else %}
                    <li style="float: right"><a href="{% url 'register_login' %}">登录</a></li>
                {% endif %}
            </ul>
        </nav>
        <!--  End  -->
    </div>
</header>
<!--  End Header  -->

<!--轮播图 start-->
<div style="margin-top: 10px;"></div>
<div class="zp-slide">
    <ul style="transform: translate3d(-910.667px, 0px, 0px);">
        <!--鬼故事-->
        <li style="width: 520px;">
            <a href="{% url 'kaidan_restaurant' %}">
                <img src="{% static 'images/rotation_chart/1.png' %}" style="width: 500px;height: 157px">
            </a>
        </li>
        <!-- 一对一聊天 -->
        <li style="width: 520px;">
            <a href="">
                <img src="{% static 'images/rotation_chart/2.jpg' %}" style="width: 500px;height: 157px">
            </a>
        </li>
        <!-- 密码群聊 -->
        <li style="width: 520px;">
            <a href="">
                <img src="{% static 'images/rotation_chart/4.jpg' %}" style="width: 500px;height: 157px">
            </a>
        </li>
        <!-- 无障碍群聊 -->
        <li style="width: 520px;">
            <a href="">
                <img src="{% static 'images/rotation_chart/3.jpg' %}" style="width: 500px;height: 157px">
            </a>
        </li>
        <!-- 树洞 -->
        <li style="width: 520px;">
            <a href="">
                <img src="{% static 'images/rotation_chart/5.jpg' %}" style="width: 500px;height: 157px">
            </a>
        </li>
        <!-- 待定 -->
        <li style="width: 520px;">
            <a href="">
                <img src="{% static 'images/rotation_chart/a1.png' %}" style="width: 500px;height: 157px">
            </a>
        </li>
    </ul>
    <a href="javascript:void(0)" class="zp-slide-left"><img
            src="{% static 'images/rotation_chart/zp-left.png' %}"></a>
    <a href="javascript:void(0)" class="zp-slide-right"><img
            src="{% static 'images/rotation_chart/zp-right.png' %}"></a>
</div>
<!--轮播图 end-->

<!--六大板块start-->
<section class="features">
    <div class="wrapper">
        <!--鬼故事-->
        <div class="feature">
            <div class="ficon my-user">
                <a href="{% url 'kaidan_restaurant' %}">
                    <img src="{% static 'images/rotation_chart/cg.jpg' %}" alt="">
                </a>
            </div>
            <div class="details_exp">
                <a href="{% url 'kaidan_restaurant' %}">
                    <h3>
                        怪谈餐馆
                    </h3>
                </a>
                <p>常感叹人心不如水，流水因遇险滩才起波澜，而人心却会无事生非，比流水更险恶难测。</p>
                <a href="{% url 'kaidan_restaurant' %}">大威天龙<span>→</span></a>
            </div>

        </div>
        <!-- 一对一聊天 -->
        <div class="feature">
            <div class="ficon my-user">
                <a href="">
                    <img src="{% static 'images/rotation_chart/2.jpg' %}" alt="">
                </a>
            </div>
            <div class="details_exp">
                <h3>one To one</h3>
                <p>你是我今生未完的相遇，诉尽深夜轻吟，引一回沧桑满地，等风起，看灯下琉璃如你</p>
                <a href="">系统更新，暂时无法使用<span>→</span></a>
            </div>
        </div>
        <!-- 密码群聊 -->
        <div class="feature">
            <div class="ficon my-user">
                <a href="{% url 'transition' username=request.chart_web.user.username %}">
                    <img src="{% static 'images/rotation_chart/4.jpg' %}" alt="">
                </a>
            </div>
            <div class="details_exp">
                <a href="{% url 'transition' username=request.chart_web.user.username %}">
                    <h3>你说我也说</h3>
                </a>
                <p>是一个需要密码的群聊空间</p>
                <a href="{% url 'transition' username=request.chart_web.user.username %}">Go<span>→</span></a>
            </div>
        </div>
        <!-- 无障碍群聊 -->
        <div class="feature">
            <div class="ficon my-user">
                <a href="{% url 'blue_sky' %}">
                    <img src="{% static 'images/rotation_chart/a2.png' %}" alt="">
                </a>
            </div>
            <div class="details_exp">
                <a href="{% url 'blue_sky' %}">
                    <h3>蓝天白云</h3>
                </a>
                <p>无障碍聊天室，发表你的感慨吧！在这里，没人知道你是谁！！！<br>注意该空间刷新，会清除聊天当前聊天记录</p>
                <a href="{% url 'blue_sky' %}">聊起<span>→</span></a>
            </div>

        </div>
        <!-- 螃蟹 -->
        <div class="feature">
            <div class="ficon my-user">
                <a href="{% url 'crab_love' %}">
                    <img src="{% static 'images/rotation_chart/a6.jpg' %}" alt="">
                </a>
            </div>
            <div class="details_exp">
                <a href="{% url 'crab_love' %}">
                    <h3>螃蟹在剥我的壳</h3>
                </a>
                <p>给你明恋/暗恋的那个人说点什么吧，虽然他/她可能看不见</p>
                <a href="{% url 'crab_love' %}">半生花开，半世花落<span>→</span></a>
            </div>
        </div>
        <!-- 待定 -->
        <div class="feature">
            <div class="ficon my-user">
                <a href="">
                    <img src="{% static 'images/rotation_chart/default.png' %}" alt="">
                </a>
            </div>
            <div class="details_exp">
                <h3>李大头</h3>
                <p>往后余生，风雪是你，平淡是你，心底温柔也是你。</p>
                <a href="">more love<span>→</span></a>
            </div>
        </div>
    </div>
</section>
<!--  六大板块End   -->


<section class="info">
    <div class="info_pic">
    </div>
    <div class="info_details">
        <h3>招募前端小伙伴</h3>

        <h2><p>不坑，不坑，不坑</p></h2>
        <h2><p>本人擅长Django-DRF前后端分离开发</p></h2>
        <h2><p>cv用的老溜了</p></h2>
        <h2><p>好吧，简单介绍下，点的技能点(python_web)，
            前端基础(html/css/js/vue框架)，
            后端(Django/Flask/DRF/)，
            其他(网络编程/linux/docker/mysql/redis/微博/腾讯/阿里第三方开发平台)</p></h2>
{#        <a href="">More Details <span>→</span></a>#}
    </div>

</section>
<!--  End Info  -->


<section class="cta">
    <h3>Simple &amp; Generous &amp; Quick</h3>
    <p>I wrote it nonsense. You can't understand it anyway</p>
{#    <a href="" class="cta_btn">Sign up now!</a>#}
    <span class="cta_sep"></span>
</section>
<!--  End cta  -->

<footer>
    <img src="{% static 'images/home/logo_footer.png' %}" alt="Crafty">
    <p class="rights">xxxx © www.lll.com</p>
</footer>
<!--  End Footer  -->


</body>
<script src="{% static 'js/rotation_chart/zpSlide.js.下载' %}" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
        rotation();
    })

    function rotation() {
        $('.zp-slide').zpSlide({
            original: 1,     	//414px小屏幕，默认显示1个
            xs: 1,           	//640px小屏幕，默认显示2个，当前自定义显示1个
            sm: 2,           	//768px中屏幕，默认显示3个，当前自定义显示2个
            md: 3,           	//1024px中屏幕，默认显示4个，当前自定义显示3个
            lg: 3,          		//1280px大屏幕，默认显示5个，当前自定义显示3个
            autoPlay: true, 	    //自动播放，默认true，当前定义true
            intervalTime: 2000   //自动播放时间，默认3秒，当前定义4秒
        });
    }
</script>
</html>